<template>
  <div>
    <!-- 选择 -->
    <el-select
      v-model="selected"
      placeholder="请选择"
      :readonly="readonly"
      :filterable="true"
      @change="onSelectChanged"
    >
      <el-option
        v-for="opt in options"
        :key="opt.value"
        :label="opt.name"
        :value="opt.value"
      />
    </el-select>

    <slot />

    <!-- 子面板 -->
    <div v-for="subpanel in subPanel" :key="subpanel.colName" style="margin-top: 15px;">
      <el-form-item
        :label="subpanel.displayName"
        :prop="subpanel.colName"
      >
        <el-input-number
          v-if="subpanel.dataType==='listInput'"
          v-model="form[subpanel.colName]"
          :min="1"
          :max="99"
          label="区域数量"
          style="text-align: center;"
          @change="onInputListChange(subpanel, form)"
        />
        <el-input
          v-else
          v-model="form[subpanel.colName]"
          :readonly="subpanel.readOnly||readonly"
          type="number"
          :placeholder="subpanel.placeholder||'请填写'+subpanel.displayName"
          @input="onInputListChange(subpanel, form)"
        />
      </el-form-item>
    </div>

    <!-- input list的子界面 -->
    <div v-for="inputItem in listInputItems" :key="inputItem.colName" style="margin-top: 15px;">
      <el-form-item
        :label="inputItem.displayName"
        :prop="inputItem.colName"
      >
        <el-input
          v-model="form[inputItem.colName]"
          :readonly="inputItem.readOnly||readonly"
          type="text"
          :placeholder="inputItem.placeholder||'请填写'+inputItem.displayName"
          @input="onInputListItemChange(inputItem, form)"
        />
      </el-form-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectPanel',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: function() {
        return {}
      }
    },
    parentForm: {
      type: Object,
      default: function() {
        return {}
      }
    },
    value: {
      type: [Number, Object, String],
      default: function() {
        return {}
      }
    },
    query: {
      type: Object,
      default: function() {
        return {
          query: '',
          queryColumn: '',
          order: '',
          column: '',
          curPage: 1,
          pageSize: 200
        }
      }
    }
  },
  data() {
    return {
      selected: this.value,
      form: {},
      options: [],
      listQuery: {
        query: '',
        queryColumn: '',
        order: '',
        column: '',
        curPage: 1,
        pageSize: 200
      },
      listData: {
        current: 0,
        pages: 0,
        searchCount: true,
        size: 20,
        total: 0,
        records: []
      },
      subPanel: [],
      listInputItems: []
    }
  },
  computed: {
    itemid() {
      return this.$route.params.id
    },
    cname() {
      return this.$route.params.cname
    }
  },
  watch: {
    parentForm(newValue) {
      this.fetchData()
    },
    item(newValues) {
      this.fetchData()
    },
    value(newValues) {
      this.selected = newValues
    },
    query(newValues) {
      this.listQuery = newValues
    }
  },
  mounted() {
    this.listQuery = this.query
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.form = Object.assign({}, this.parentForm)
      this.options = this.item.data.options
      this.subPanel = this.item.subPanels[this.selected]
      console.log(996, 'form', this.form)
      this.$nextTick(() => {
        this.switchPannel(this.selected)
      })
    },
    switchPannel(event) { // event 0单个，1多个
      this.subPanel = this.item.subPanels[event]
      this.listInputItems = event === 1 ? this.subPanel[0].data(this.form.sectionCount) : []
      // console.log(999, this.form, this.subPanel, this.listInputItems)
      if (this.form.sections) {
        this.form.sections.forEach((value, index) => {
          this.form[`sectionList${index}`] = value.sectionName
        })
      //   // 更新父form
      //   this.$emit('valueChange', { item: this.subPanel[0], form: this.form })
      }
    },
    onSelectChanged(event) {
      console.log(999)
      if (this.form.sectionCount === 0) { this.form.sectionCount = event + 1 } // 0单个，1多个，所以默认值+1
      this.switchPannel(event)
      this.$emit('change', this.selected)
    },
    onInputListChange(panel, form) {
      console.log('onInputListChange', panel, form)
      this.$emit('valueChange', { item: panel, form })
      this.listInputItems = panel.data(form[panel.colName])
    },
    onInputListItemChange(inputItem, form) {
      console.log('onInputListItemChange', inputItem, form)
      this.$emit('valueChange', { item: inputItem, form })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

